<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        /*  > 表示 父子关系*/
        /*#main > div{*/
            /*color: red;*/
        /*}*/

        /*#son1{*/
            /*color: red;*/
        /*}*/

        /* , 表示 多个选择器共用样式 */
        /*#main>span>div, #main>div>div{*/
            /*color: red;*/
        /*}*/

        /* 空格表示 所有的后辈元素 */
        /*#main span{*/
            /*color: chartreuse;*/
        /*}*/

        /* + 表示紧挨着的 */
        /*#main>span+div{*/
            /*color: red;*/
        /*}*/

        /*#main span[title|=xx]{*/
            /*color: red;*/
        /*}*/

        /*#main div.x{*/
            /*color: red;*/
        /*}*/

        /*100+10*/
        #main .x{
            color: chartreuse;
        }

        /*200*/
        #main #son1{
            color: red;
        }
        /*20*/
        .father .x{
            color: antiquewhite!important;
        }
        /*201*/
        #main div#son1{
            color: aqua;
        }
        /*120*/
        .father #son1.x{
            color: blue;
        }

        /*

        RGB：红（Red）绿（Green）蓝（Blue）

        表示方法：#两位表示红两位绿两位蓝

        */

        #big{
            color: #0000ff;
            color: #00ff00;
            color: #ff0000;
            color: #00f;
            color: #00aafa;
            color: #0FC;
            color: rgb(255, 0, 0);
            color: rgb(0, 170, 250);
            color: rgba(255, 0, 0, 1);


        }


    </style>
</head>
<body>

<div id="main" class="father">
    <span id="big">大女儿</span>
    <span>
        <div>2女的大儿子（大孙子）</div>
        <span>2女的大女儿</span>
    </span>
    <div class="x" id="son1">大儿子</div>
    <!--<div class="y">大儿子2</div>-->
    <div>
        <span title="xx-x">2儿子的大女儿</span>
        <span title="yy-xy">2儿子的2女儿</span>
        <div>2儿的大儿子（小孙子）</div>
    </div>
</div>

</body>
</html>